<template>
  <div class="wrapper">
    <div class="wrap">
      <div class="container">
          <img src="../../assets/share-bg.png" alt="">
          <div class="txt-box">
              <p class="big">还有多道直击人心的行业问题将于现场<span>有奖</span>提问。</p>
              <img src="../../assets/logo.png" alt="">
              <p>主办单位：</p>
              <h5>海南省平面设计协会</h5>
              <p>活动时间：</p>
              <h5>2019年9月7日 晚上19:30</h5>
              <p>活动地址：</p>
              <h5>海口市国兴大道日月广场</h5>
              <h5>知和行书局</h5>
          </div>
          <div class="addr-btn" @click="showDialog">
              <span>
                  <i></i>
                  <b></b>
              </span>
              <p>点击获取活动地址</p>
          </div>
          <div class="ewm-box">
              <img src="../../assets/ewm1.png" alt="">
              <p>关注<em>“Haidesign”</em>微信公众号</p>
              <p>了解更多设计活动信息</p>
          </div>
          <p class="copy">技术支持@达思文化科技</p>
      </div>
    </div>
    <div class="dialog" v-show="show">
      <div class="mask"></div>
      <div class="dialog-container animated fadeInUpBig">
        <div class="dialog-box">
          <div class="imgbox">
          <img src="../../assets/ewm2.png" alt="">
          </div>
          <h5>识别二维码进入导航</h5>
          <p>海口市国兴大道日月广场知和行书局</p>
          <span class="btn" @click="close">关闭</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'question1',
  components: {},
  data () {
    return {
      show: false,
      cssanimate: false,
    }
  },
  mounted () {
    if (this.GLOBAL.loading) {
      this.$router.push('/')
    }
    this.cssanimate = true;
  },
  methods: {
    showDialog () {
      this.show = true;
    },
    close () {
      this.show = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container {
  position: relative;
  padding-bottom: .5rem;
  &>img {
    width: 100%;
    // opacity: .3;
  }
  .txt-box {
      position: absolute;
      width: 7.6rem;
      top: 6%;
      left: 50%;
      margin-left: -3.6rem;
      img {
          width: 30%;
          margin-top: .3rem;
      }
      p {
          font-size: .2rem;
          color: #333;
          line-height: .5rem;
          margin-top: .3rem;
          &.big {
              line-height: .6rem;
              font-size: .5rem;
              color: #0d44ed;
              font-weight: 600;
          }
          span {background: yellow;}
      }
      h5 {
          font-size: .3rem;
          color: #333;
          line-height: .5rem;
          font-weight: 600;
      }
  }
  .addr-btn {
      position: absolute;
      width: 5.6rem;
      height: 1.5rem;
      background: #ccc url(../../assets/addr-button.png) no-repeat center;
      background-size: 5.6rem;
      left: 50%;
      margin-left: -4.56rem;
      top: 48.2%;
      display: flex;
      span {
          display: flex;
          flex-direction: column;
          width: 1rem;
          justify-content: center;
          align-items: center;
          padding-left: .4rem;
          i {
              width: .4rem;
              height: .4rem;
              background: url(../../assets/addr-icon2.png) no-repeat center;
              background-size: .3rem;
              z-index: 2;
              position: relative;
          }
          b {
              width: .4rem;
              height: .2rem;
              background: url(../../assets/addr-icon1.png) no-repeat center;
              background-size: .4rem;
              margin-top: -.1rem;
          }
      }
      p {
          font-size: .45rem;
          font-weight: 600;
          line-height: 1.5rem;
      }
  }
  .ewm-box {
      position: absolute;
      width: 5rem;
      top: 60%;
      left: 50%;
      margin-left: -2.8rem;
      img {
          width: 70%;
          display: block;
          margin: 0 auto;
      }
      p {
          font-size: .3rem;
          color: #333;
          font-weight: 600;
          text-align: center;
          line-height: .5rem;
          em {
              color: #0d44ed;
          }
      }
  }
  .copy {
      font-size: .3rem;
      color: #0d44ed;
      text-shadow: .2rem 0rem .5rem #fff,-.2rem 0rem .5rem #fff,0rem .2rem .5rem #fff,0rem -.2rem .5rem #fff;
      text-align: center;
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba($color: #000000, $alpha: .5);
  z-index: 3;
}
.dialog-container {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 4;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
	animation-duration: .5s;
  .dialog-box {
    min-width: 5rem;
    padding: .8rem .6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: .2rem;
    .imgbox {
      width: 3rem;
      img {
        width: 100%;
      }
    }
    h5{
      font-size: .4rem;
      font-weight: 600;
      color: #0d44ed;
      height: 1rem;
      line-height: 1rem;
      margin-top: .2rem;
    }
    p{
      height: .4rem;
      line-height: .4rem;
      font-size: .3rem;
      color: #333;
      font-weight: 600;
    }
    .btn{
      margin-top: .4rem;
      border-radius: 1rem;
      padding: .3rem .8rem;
      border: .1rem solid #0d44ed;
      font-size: .4rem;
      color: #333;
      background: #ffd400;
      font-weight: 600;
    }
  }
}


</style>
